<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ChinaVis 2019</title>
	<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script type="text/javascript" src="d3.v4.js"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<!-- 引入样式 -->
	
	<style>
			*{
				padding: 0;
				margin: 0;
			}
			.contain{
				width: 800px;
				height: 900px;
			}
			.people{
				fill:#F56C6C;
			}
			#timeText {
				width: 100px;
				position: absolute;
				top: 10px;
				left: 550px;
				color: rgb(128,128,128);
				text-align: center;
				font-weight: bold;
				font-size: 33px;
			}
			#container{
				background: #dcdcec;
				width: 500px;
				height: 20px;
				border-radius: 3px;
				position: absolute;
				left: 350px;
				top: 55px;
				z-index: 999;
			}
			#control{
				display: inline-block;
				width: 15px;
				height: 28px;
				background: rgb(128,128,128);
				position: relative;
				border-radius: 2px;
				left: 0;
				top: 0;
				margin-top:-4px; 
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
			}
			.ggrid{
				stroke: rgb(106,119,136);
			}
			#tooltip {
				position: absolute;
				width: 20px;
				height: auto;
				padding: 10px;
				background-color: white;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
				z-index: 999;
			}
			
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				color: #F56C6C;
				font-size: 16px;
				line-height: 20px;
			}
			#svg1{
				width: 800px;
				height: 900px;
				position: absolute;
				left: 200px;
				top: 95px;
				border: 3px solid rgb(101,179,193);
				border-radius: 10px;
				margin-bottom: 30px;
			}
			#svg2{
				height: 400px;
				width: 600px;
				border: 3px solid rgb(101,179,193);
				border-radius: 10px;
				margin-top: 10px;
			}
			.svg3{
				position: absolute;
				right: 150px;
				top: 550px;
				border: 3px solid rgb(101,179,193);
				border-radius: 10px;
			}
			#svgContainer{
				position: absolute;
				right: 150px;
				top: 10px;
			}
			button{
				width: 45px;
				height: 25px;
				border-radius: 2px;
			}
			#textContainer{
				position: absolute;
				width: 85px;
				left: 1530px;
				top: 600px;
				
				border: 2px solid rgb(101,179,193);
				border-radius: 8px;
				padding: 2px;
			}
			p{
				line-height: 16px;
			}
			p span{
				font-size: 12px;
			}
		</style>
</head>
<body style="background: url(2.png) no-repeat;">
	<div id="tooltip" class="hidden">
			<p id="value"><strong>100</strong></p>
	</div>
	
	<div id="container">
		<div id="control"></div>
	</div>
	<div id="timeText">
		7:0:0
	</div>
	<div id="svg1">
		<svg class="contain"></svg>
	</div>
	<div id="svgContainer">
		<h1 id="time" style="text-align: center;margin-bottom: 5px;color:rgb(128,128,128);"></h1>
	    <button id="back" style="margin-left: 246px;">后退</button>
		<button id="forward" style="margin-left: 20px;">前进</button>
		<div id="svg2"></div>
	</div>
		
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/simplex.js"></script>

    
	
    <script>
	    	var day1,//存储读取到的day的数据
				people1 = [],//存储对应时间节点时最新的各个人员的位置
				index1 = [],//便于快速查找数据
				curr1 = 0;//便于快速查找数据
			var grid_SumOfPeople_floor = new Array();//存整个楼每个点人数的二维数组，初始化为0
			var exits = [{x: 0, y: 19}, {x: 15, y: 5}, {x: 15, y: 15}, {x: 15, y: 17}];
			for(var i = 0; i<32; i++){//初始化0
				grid_SumOfPeople_floor[i] = new Array();
				for(var j = 0; j<30; j++){
					grid_SumOfPeople_floor[i][j] = 0;
				}
			}

			//days数据的转换函数
			var rowConventerDay1 = function (d) {
				return {
					id: parseInt(d.id),
					sid: parseInt(d.sid),
					time: parseInt(d.time),
					x: (d.floor=="1" ? parseInt(d.x) : parseInt(d.x)+16),
					y: parseInt(d.y)
				};
			}
			var line="";
			var data2 = []
			//console.log(line);
			d3.csv("day1.csv", rowConventerDay1, function (data) {
				day1=data;
				var time=25200,
					timeGap=900;
				time+=timeGap;
				d3.select("#time")
					.text(timeFormat(time));
				getTimeIn1(day1, time);
				for (var i = 0; i < people1.length; i++) {
					var X = people1[i].x;
					var Y = people1[i].y;
					grid_SumOfPeople_floor[X][Y]++;
				}
						
				for (var i = 0; i < grid_SumOfPeople_floor.length; i++) {
					for (var j = 0; j < grid_SumOfPeople_floor[i].length; j++){
						let tmp = [i,j,grid_SumOfPeople_floor[i][j]];
						data2.push(tmp);				
					}
				}
				d3.select("#forward")
					.on("click", function () {
						data2 = [];
						for(var i = 0; i<32; i++){//重新初始化0
							for(var j = 0; j<30; j++){
								grid_SumOfPeople_floor[i][j] = 0;
							}
						}
						time+=timeGap;
						d3.select("#time")
							.text(timeFormat(time));
						getTimeIn1(day1, time);
						for (var i = 0; i < people1.length; i++) {
							var X = people1[i].x;
							var Y = people1[i].y;
							grid_SumOfPeople_floor[X][Y]++;
						}		
						for (var i = 0; i < grid_SumOfPeople_floor.length; i++) {
							for (var j = 0; j < grid_SumOfPeople_floor[i].length; j++){
								let tmp = [i,j,grid_SumOfPeople_floor[i][j]];
								data2.push(tmp);
							}
						}
						draw();
					});
				d3.select("#back")
					.on("click", function () {
						data2 = [];
						for(var i = 0; i<32; i++){//重新初始化0
							for(var j = 0; j<30; j++){
								grid_SumOfPeople_floor[i][j] = 0;
							}
						}
						time-=timeGap;
						d3.select("#time")
							.text(timeFormat(time));
						getTimeDe1(day1, time);
						for (var i = 0; i < people1.length; i++) {
							var X = people1[i].x;
							var Y = people1[i].y;
							grid_SumOfPeople_floor[X][Y]++;
						}		
						for (var i = 0; i < grid_SumOfPeople_floor.length; i++) {
							for (var j = 0; j < grid_SumOfPeople_floor[i].length; j++){
								let tmp = [i,j,grid_SumOfPeople_floor[i][j]];
								data2.push(tmp);
							}
						}
						draw();
					});
				draw();
					
		});
		function draw(){
			var dom = document.getElementById("svg2");
	      var myChart = echarts.init(dom);
	      var app = {};
	      option = null;

	      var x = ['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13', '14', '15', '16', '17','18','19', '20', '21', '22', '23', '24','25','26','27','28','29','30','31','32'];
	      var y = ['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13', '14', '15', '16', '17','18','19', '20', '21', '22', '23', '24','25','26','27','28','29','30'];

	  
	      option = {
	          tooltip: {},
	          visualMap: {
	              max: 20,
	              inRange: {
	                  color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
	              }
	          },
	          xAxis3D: {
	              type: 'category',
	              data: x
	          },
	          yAxis3D: {
	              type: 'category',
	              data: y
	          },
	          zAxis3D: {
	              type: 'value'
	          },
	          grid3D: {
	              boxWidth: 200,
	              boxDepth: 200,
	              viewControl: {
	                  // projection: 'orthographic'
	              },
	              light: {
	                  main: {
	                      intensity: 1.2,
	                      shadow: true
	                  },
	                  ambient: {
	                      intensity: 0.5
	                  }
	              }
	          },
	          series: [{
	              type: 'bar3D',
	              data: data2.map(function (item) {
	                  return {
	                      value: [item[0], item[1], item[2]],
	                  }
	              }),
	              shading: 'lambert',

	              label: {
	                  textStyle: {
	                      fontSize: 16,
	                      borderWidth: 1
	                  }
	              },

	              emphasis: {
	                  label: {
	                      textStyle: {
	                          fontSize: 20,
	                          color: '#900'
	                      }
	                  },
	                  itemStyle: {
	                      color: '#900'
	                  }
	              }
	          }]
	      };
	      if (option && typeof option === "object") {
	          myChart.setOption(option, true);
	      }
		}
	
		//整个读取的结构应该是d3.csv(传感器),在这之中根据需要d3.csv(days)
		//参数1是day的数据，二是当前的时间
		//时间递增时的函数，可以动态、快速确定结果
		function getTimeIn1(day, time) {
			for (; curr1 < day.length; curr1++) {
				if(day[curr1].time<time)
				{
					if(index1.indexOf(day[curr1].id) == -1)
					{
						index1.push(day[curr1].id);
						people1.push(day[curr1]);
					}
					else
					{
						var term = {x: (day[curr1].x), y: (day[curr1].y)};//判断是否到达出口位置
						if(GetIndex(exits, term)==-1)
						{
							people1[index1.indexOf(day[curr1].id)] = day[curr1];
						}
						else//到达出口位置，需要删去该元素
						{
							people1.splice(index1.indexOf(day[curr1].id),1);
							index1.splice(index1.indexOf(day[curr1].id),1);
						}
					}
				}
				else
					break;
			}
		}
		//参数1是day的数据，二是当前的时间
		//时间减少时的函数
		function getTimeDe1(day, time) {
			var result=[], indexs = [];
			for (var i = 0; i < day.length; i++) {
				if(day[i].time<time)
				{
					if(indexs.indexOf(day[i].id) == -1)
					{
						indexs.push(day[i].id);
						result.push(day[i]);
					}
					else
					{
						var term = {x: (day[i].x), y: (day[i].y)};//判断是否到达出口位置
						if(GetIndex(exits, term)==-1)
						{
							result[indexs.indexOf(day[i].id)] = day[i];
						}
						else
						{
							result.splice(indexs.indexOf(day[i].id),1);
							indexs.splice(indexs.indexOf(day[i].id),1);
						}
					}
				}
				else
				{
					people1 = result;
					index1 = indexs;
					curr1 = i;
					break;
				}
			}
		}

      
    </script>
	
	<script type="text/javascript">

		var width = 800,
			height = 1000,
			padding = 50,
			svg,
			day,//存储读取到的day的数据
			people = [],//存储对应时间节点时最新的各个人员的位置
			index = [],//便于快速查找数据
			curr = 0,//便于快速查找数据
			tmpData = d3.range(31),
			tmpData2 = d3.range(17)
			p= 40,//内边距
			xScale= d3.scaleLinear().domain([0, 30]).range([p, width - p]), //(2) 定义x和y比例尺
			gridSize = xScale(1)-xScale(0),
			peopleSize = 5,
			floor1 = [],//第一层的所有人
			floor2 = [];//第二层的所有人
		var	grids1, grids2, bfb, time_min=25200, time_max=68400, now_time, old_time, rScale1, rScale2, area;
		var exits = [{x: 0, y: 19}, {x: 15, y: 5}, {x: 15, y: 15}, {x: 15, y: 17}];
		var son = $("#control");
		var parent = $("#container");
		var grid_SumOfPeople_floor1 = new Array();//存整个楼每个点人数的二维数组，初始化为0
		var grid_SumOfPeople_floor2 = new Array();
		for(var i = 0; i<16; i++){//初始化0
			grid_SumOfPeople_floor1[i] = new Array();
			grid_SumOfPeople_floor2[i] = new Array();
			for(var j = 0; j<30; j++){
				grid_SumOfPeople_floor1[i][j] = 0;
				grid_SumOfPeople_floor2[i][j] = 0;
			}
		}
		//days数据的转换函数
		var rowConventerDay = function (d) {
			return {
				id: parseInt(d.id),
				sid: parseInt(d.sid),
				time: parseInt(d.time),
				x: parseInt(d.x),
				y: parseInt(d.y),
				floor: parseInt(d.floor)
			};
		}
		svg = d3.select("#svg1 svg");
		//*******
		//main
		//*******
		d3.csv("day1.csv", rowConventerDay, function (dataday) {
			day=dataday;
			old_time = 25200;
			getTimeIn(day, old_time);
			for (var i = 0; i < people.length; i++) {
				var X = people[i].x;
				var Y = people[i].y;
				if(people[i].floor==1){
					floor1.push(people[i]);
					grid_SumOfPeople_floor1[X][Y]++;//二维数组对应++
				}
				else{
					floor2.push(people[i]);
					grid_SumOfPeople_floor2[X][Y]++;
				}
			}
			rScale1 = d3.scaleLinear()
						.domain([leastOfFour(grid_SumOfPeople_floor1), largestOfFour(grid_SumOfPeople_floor1)])
						.range([3, (gridSize-3)/2]);
			rScale2 = d3.scaleLinear()
						.domain([leastOfFour(grid_SumOfPeople_floor2), largestOfFour(grid_SumOfPeople_floor2)])
						.range([3, (gridSize-3)/2]);
			drawGrids();
			draws(floor1, 1);
			draws(floor2, 2);
			drag(son, parent);

			var svg = d3.select(".contain");
			//画边框,参数单位为格子，例如drawBorder(1,2,5,2)为距离左边为1格子，上边为2格子的一个宽为5个格子高为2个格子的矩形
			drawBorder1(1,2,5,2)
			drawBorder1(1,4,5,2);
			drawBorder1(1,6,5,2);
			drawBorder1(1,8,5,2);
			drawBorder1(7,3,2,8);
			drawBorder1(10,4,2,2);
			drawBorder1(10,6,2,4);
			drawBorder1(10,10,2,2);
			drawBorder1(2,12,4,2);
			drawBorder1(15,2,4,10);
			drawBorder1(19,2,10,10);
			drawBorder1(19,14,2,2);
			drawBorder1(21,14,4,2);
			drawBorder1(25,14,2,2);
			drawBorder1(27,14,2,2);
			drawBorder1(10,1,2,1);
			drawBorder1(10,14,2,1);

			drawBorder2(1,2,5,8);
			drawBorder2(1,10,5,2);
			drawBorder2(0,13,6,3);
			drawBorder2(10,4,2,2);
			drawBorder2(10,6,2,2);
			drawBorder2(10,1,2,1);
			drawBorder2(10,14,2,1);

			appendText(10.1,2,"扶梯",20);
			appendText(10.1,15,"扶梯",20);
			appendText(2,3.5,"分会场A",20);
			appendText(2,5.5,"分会场B",20);
			appendText(2,7.5,"分会场C",20);
			appendText(2,9.5,"分会场D",20);
			appendText(7.5,5.5,"海",20);
			appendText(7.5,7.5,"报",20);
			appendText(7.5,9.5,"区",20);
			appendText(2.7,13.5,"签到处",20);
			appendText(10,5.5,"厕所1",18);
			appendText(10,8.4,"room1",18);
			appendText(10,11.4,"room2",18);
			appendText(16,7.4,"展 厅",24);
			appendText(21.8,7.4,"主 会 场",24);
			appendText(19,15.4,"服务台",15);
			appendText(22.2,15.4,"room3",15);
			appendText(25.1,15.4,"room4",15);
			appendText(27.1,15.4,"厕所2",15);

			appendText2(2.2,6.6,"餐 厅",24);
			appendText2(2.2,11.4,"room5",20);
			appendText2(1.7,15,"休闲区",20);
			appendText2(10.1,2,"扶梯",20);
			appendText2(10.1,15,"扶梯",20);
			appendText2(10,5.5,"厕所3",18);
			appendText2(10,7.4,"room6",18);


			//添加defs标签
			var defs = svg.append("defs");
			//添加marker标签及其属性
			var arrowMarker = defs.append("marker")
			    .attr("id","arrow")
			    .attr("markerUnits","strokeWidth")
			    .attr("markerWidth",12)
			    .attr("markerHeight",12)
			    .attr("viewBox","0 0 12 12")
			    .attr("refX",6)
			    .attr("refY",6)
			    .attr("orient","auto")

			var arrow_path = "M6,5 L8,6 L6,7 L6,6 L6,3";
			arrowMarker.append("path")
			    .attr("d",arrow_path)
			    .attr("fill","rgb(255,181,62)")


			appendArrow(20,0.8,20,0)
			appendArrow(-0.2,13.6,0.6,13.6)
			appendArrow(3,16.6,3,15.8)
			appendArrow(5,16.6,5,15.8)
			appendArrow(8,16.6,8,15.8)
			appendArrow(6,15.2,6,16.0)
			appendArrow(16,15.2,16,16.0)
			appendArrow(18,15.2,18,16.0)
			
		});
		function drawBorder1(x,y,width,height){
			svg.append('rect')
				.attr("x",padding+x*gridSize-gridSize/2+2)//每个矩形的起始x坐标
				.attr("y",padding+y*gridSize-gridSize/2+2)
				.attr("width",gridSize*width)
				.attr("height",gridSize*height)//每个矩形的高度
				.attr("fill","none")
				.attr("stroke-width",2)
				.attr("stroke","black");//填充颜色
		}
		function drawBorder2(x,y,width,height){
			svg.append('rect')
				.attr("x",padding+x*gridSize-gridSize/2+2)//每个矩形的起始x坐标
				.attr("y",padding+xScale(16)+y*gridSize-gridSize/2+2)
				.attr("width",gridSize*width)
				.attr("height",gridSize*height)//每个矩形的高度
				.attr("fill","none")
				.attr("stroke-width",2)
				.attr("stroke","black");//填充颜色
		}
		function appendText(x,y,str,fontSize){
			svg.append('text')
				.attr('x',padding+x*gridSize-gridSize/2+3)
				.attr('y',padding+y*gridSize-gridSize/2-3)
				.text(str)
				.style('font-size',fontSize)
				.style('font-weight','bold')
				.style('font-family','cursive');
		}
		function appendText2(x,y,str,fontSize){
			svg.append('text')
				.attr('x',padding+x*gridSize-gridSize/2+3)
				.attr('y',padding+xScale(16)+y*gridSize-gridSize/2-3)
				.text(str)
				.style('font-size',fontSize)
				.style('font-weight','bold')
				.style('font-family','cursive');
		}
		function appendArrow(x1,y1,x2,y2){
			svg.append('line')
				.attr("x1",padding+(x1-1)*gridSize+2)
			    .attr("y1",padding+y1*gridSize-gridSize/2)
			    .attr("x2",padding+(x2-1)*gridSize+2)
			    .attr("y2",padding+y2*gridSize-gridSize/2)
				.attr('stroke','rgb(255,181,62)')
				.attr('stroke-width',8)
    			.attr("marker-end","url(#arrow)");
		}
		//写给exits数组的函数，用来判断某一坐标是否为出口坐标
		function GetIndex(m,d) {
			for (var i = 0; i < m.length; i++) {
				if(m[i].x==d.x&&m[i].y==d.y)
					return i;
			}
			return -1;
		}
		//整个读取的结构应该是d3.csv(传感器),在这之中根据需要d3.csv(days)
		//参数1是day的数据，二是当前的时间
		//时间递增时的函数，可以动态、快速确定结果
		function getTimeIn(day, time) {
			for (; curr < day.length; curr++) {
				if(day[curr].time<time)
				{
					if(index.indexOf(day[curr].id) == -1)
					{
						index.push(day[curr].id);
						people.push(day[curr]);
					}
					else
					{
						var term = {x: (day[curr].x), y: (day[curr].y)};//判断是否到达出口位置
						if(GetIndex(exits, term)==-1)
						{
							people[index.indexOf(day[curr].id)] = day[curr];
						}
						else//到达出口位置，需要删去该元素
						{
							people.splice(index.indexOf(day[curr].id),1);
							index.splice(index.indexOf(day[curr].id),1);
						}
					}
				}
				else
					break;
			}
		}
		//参数1是day的数据，二是当前的时间
		//时间减少时的函数
		function getTimeDe(day, time) {
			var result=[], indexs = [];
			for (var i = 0; i < day.length; i++) {
				if(day[i].time<time)
				{
					if(indexs.indexOf(day[i].id) == -1)
					{
						indexs.push(day[i].id);
						result.push(day[i]);
					}
					else
					{
						var term = {x: (day[i].x), y: (day[i].y)};//判断是否到达出口位置
						if(GetIndex(exits, term)==-1)
						{
							result[indexs.indexOf(day[i].id)] = day[i];
						}
						else
						{
							result.splice(indexs.indexOf(day[i].id),1);
							indexs.splice(indexs.indexOf(day[i].id),1);
						}
					}
				}
				else
				{
					people = result;
					index = indexs;
					curr = i;
					break;
				}
			}
		}
		function findX(x,floor){
			return xScale(x)+gridSize/2;
		}
		function findY(y,floor){
			if(floor == 1){
				return xScale(y)+gridSize/2;
			}
			else{
				return xScale(16)+xScale(y)+gridSize/2;
			}
		} 	
		function draws(floor, i) {
			if(floor.length>0)
			{
				if(i==1)
				{
					var item = grids1.selectAll("circle")
					.data(floor);
					//update
					item.attr("cx",function (d) {
						return findX(d.y,1);;
					})
	    			.attr("cy",function (d) {
	    				return findY(d.x,1);;
	    			})
	    			.attr("r",function (d) {
	    				return rScale1(grid_SumOfPeople_floor1[d.x][d.y]);
	    			})
	    			.attr("class", "people");
					//enter
					item.enter()
					.append("circle")
					.attr("cx",function (d) {
						return findX(d.y,1);
					})
	    			.attr("cy",function (d) {
	    				return findY(d.x,1);
	    			})
	    			.attr("r",function (d) {
	    				return rScale1(grid_SumOfPeople_floor1[d.x][d.y]);
	    			})
	    			.attr("class", "people");
	    			//exit
	    			item.exit()
	    				.remove();
				}
				else
				{
					//同上
					var item = grids2.selectAll("circle")
					.data(floor);
					//update
					item.attr("cx",function (d) {
						return findX(d.y,2);
					})
	    			.attr("cy",function (d) {
	    				return findY(d.x,2);
	    			})
	    			.attr("r",function (d) {
	    				return rScale2(grid_SumOfPeople_floor2[d.x][d.y]);
	    			})
	    			.attr("class", "people");
					//enter
					item.enter()
					.append("circle")
					.attr("cx",function (d) {
						return findX(d.y,2);
					})
	    			.attr("cy",function (d) {
	    				return findY(d.x,2);
	    			})		
	    			.attr("r",function (d) {
	    				return rScale2(grid_SumOfPeople_floor2[d.x][d.y]);
	    			})
	    			.attr("class", "people");
	    			//exit
	    			item.exit()
	    				.remove();
				}
			}
			else
			{
				if(i==1)
				{
					grids1.selectAll("circle")
					.data(floor)
					.exit()
					.remove();
				}
				else
				{
					grids2.selectAll("circle")
					.data(floor)
					.exit()
					.remove();
				}
			}
			
		}
		function timeFormat(time) {
			var hour = parseInt(time/3600);
			var minute = parseInt((time%3600)/60);
			var second = (time%3600)%60;
			return hour+":"+minute+":"+second;
		}
		//阿春修改
		function drag(obj1,obj3) {//obj1，obj3是jQuery对象。obj1是子元素的jQuery对象，obj3是父元素的jQuery对象。
		    var x;
		    var y;
		    var gapX;
		    var gapY;
		    obj1.mousedown(start);
		    function start(event) {
		        if (event.button == 0) {//判断是否点击鼠标左键
		            gapX = event.clientX - obj1.offset().left + obj3.offset().left;//这是计算在减去鼠标相对于子元素的偏移量后，父元素相对于屏幕的横向距离。
		            gapY = event.clientY - obj1.offset().top + obj3.offset().top;//与gapX同理
		            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
		            $(document).mousemove(move);
		            //此处的$(document)可以改为obj
		            $(document).mouseup(stop);
		        }
		    }
		    function move(event) {
		    	bfb = parseFloat(((obj1.offset().left-obj3.offset().left)/(obj3[0].offsetWidth - obj1[0].offsetWidth)));
		        x = event.clientX - gapX;//用鼠标相对于屏幕的横向距离减去父元素相对于屏幕的横向距离
				if(x < 0) {//限制obj1移出obj3左端
				        x = 0;
				 }
				 //限制obj1移出obj3的右端
				else if(x > (obj3[0].offsetWidth - obj1[0].offsetWidth)) {
				    x = obj3[0].offsetWidth - obj1[0].offsetWidth;
				}
				
				obj1.css({
				    "left": x + "px"
				});
				now_time = parseInt(bfb*(time_max - time_min))+time_min;
				d3.select("#timeText")
					.text(function () {
						return timeFormat(now_time);
					});
		    }
		    function stop(){
		        //解绑定，这一步很必要，前面有解释
		        $(document).unbind("mousemove", move);
		        $(document).unbind("mouseup", stop);
		        if(now_time>old_time)
		        {
		        	old_time = now_time;//更新old_time
		        	getTimeIn(day, now_time);
		        	floor1=[]; floor2=[];
					for(var i = 0; i<16; i++){//重新初始化0
						for(var j = 0; j<30; j++){
							grid_SumOfPeople_floor1[i][j] = 0;
							grid_SumOfPeople_floor2[i][j] = 0;
						}
					}
		        	for (var i = 0; i < people.length; i++) {
						var X = people[i].x;
						var Y = people[i].y;
						if(people[i].floor==1){
							floor1.push(people[i]);
							grid_SumOfPeople_floor1[X][Y]++;//二维数组对应++
						}
						else{
							floor2.push(people[i]);
							grid_SumOfPeople_floor2[X][Y]++;
						}
					}
					rScale1.domain([leastOfFour(grid_SumOfPeople_floor1), largestOfFour(grid_SumOfPeople_floor1)]);
					rScale2.domain([leastOfFour(grid_SumOfPeople_floor2), largestOfFour(grid_SumOfPeople_floor2)]);
					draws(floor1, 1);
					draws(floor2, 2);
					grids1.selectAll(".ggrid")
						.on("mousemove", function(d) {
							//Get this bar's x/y values, then augment for the tooltip
							console.log(event)
							var xPosition = event.offsetX+210;
							var yPosition = event.offsetY+70;
							//Update the tooltip position and value
							d3.select("#tooltip")
								.style("left", xPosition + "px")
								.style("top", yPosition + "px")						
								.select("#value")
								.text(function () {
									return grid_SumOfPeople_floor1[d.x][d.y];
								});
					   
							//Show the tooltip
							d3.select("#tooltip").classed("hidden", false);
					   })
					   .on("mouseout", function() {
					   
							//Hide the tooltip
							d3.select("#tooltip").classed("hidden", true);
							
					   });
					   grids2.selectAll(".ggrid")
						.on("mousemove", function(d) {
							//Get this bar's x/y values, then augment for the tooltip
							var xPosition = event.offsetX+210;
							var yPosition = event.offsetY+70;
							//Update the tooltip position and value
							d3.select("#tooltip")
								.style("left", xPosition + "px")
								.style("top", yPosition + "px")						
								.select("#value")
								.text(function () {
									return grid_SumOfPeople_floor2[d.x][d.y];
								});
					   
							//Show the tooltip
							d3.select("#tooltip").classed("hidden", false);
					   })
					   .on("mouseout", function() {
					   
							//Hide the tooltip
							d3.select("#tooltip").classed("hidden", true);
							
					   });
		        }
		        else if(now_time<old_time)
		        {
		        	old_time = now_time;
		        	getTimeDe(day, now_time);
		        	floor1=[]; floor2=[];
					for(var i = 0; i<16; i++){//重新初始化0
						for(var j = 0; j<30; j++){
							grid_SumOfPeople_floor1[i][j] = 0;
							grid_SumOfPeople_floor2[i][j] = 0;
						}
					}
		        	for (var i = 0; i < people.length; i++) {
						var X = people[i].x;
						var Y = people[i].y;
						if(people[i].floor==1){
							floor1.push(people[i]);
							grid_SumOfPeople_floor1[X][Y]++;//二维数组对应++
						}
						else{
							floor2.push(people[i]);
							grid_SumOfPeople_floor2[X][Y]++;
						}
					}
					rScale1.domain([leastOfFour(grid_SumOfPeople_floor1), largestOfFour(grid_SumOfPeople_floor1)]);
					rScale2.domain([leastOfFour(grid_SumOfPeople_floor2), largestOfFour(grid_SumOfPeople_floor2)]);
					draws(floor1, 1);
					draws(floor2, 2);
					grids1.selectAll(".ggrid")
						.on("mousemove", function(d) {
							//Get this bar's x/y values, then augment for the tooltip
							var xPosition = event.offsetX+210;
							var yPosition = event.offsetY+70;
							//Update the tooltip position and value
							d3.select("#tooltip")
								.style("left", xPosition + "px")
								.style("top", yPosition + "px")						
								.select("#value")
								.text(function () {
									return grid_SumOfPeople_floor1[d.x][d.y];
								});
					   
							//Show the tooltip
							d3.select("#tooltip").classed("hidden", false);
					   })
					   .on("mouseout", function() {
					   
							//Hide the tooltip
							d3.select("#tooltip").classed("hidden", true);
							
					   });
					   grids2.selectAll(".ggrid")
						.on("mousemove", function(d) {
							//Get this bar's x/y values, then augment for the tooltip
							var xPosition = event.offsetX+210;
							var yPosition = event.offsetY+70;
							//Update the tooltip position and value
							d3.select("#tooltip")
								.style("left", xPosition + "px")
								.style("top", yPosition + "px")						
								.select("#value")
								.text(function () {
									return grid_SumOfPeople_floor2[d.x][d.y];
								});
					   
							//Show the tooltip
							d3.select("#tooltip").classed("hidden", false);
					   })
					   .on("mouseout", function() {
					   
							//Hide the tooltip
							d3.select("#tooltip").classed("hidden", true);
							
					   });
		        }
		    }
		}
		function largestOfFour (arr) {
			return d3.max(arr.map(Function.apply.bind(Math.max, null)), function (d) {
				return d;
			});
		}
		function leastOfFour (arr) {
			return d3.min(arr.map(Function.apply.bind(Math.min, null)), function (d) {
				return d;
			});
		}
		function drawGrids() {
			//一楼所有元素
			grids1 = svg.append("g")
							.attr("class", "grids1");
			//一楼灰色区域
			var grayArea1 = grids1.append("g")
							.attr("class", "grayArea1");
			//扶梯
			var futiArea1 = grids1.append("g")
							.attr("class", "futiArea1");
			//各大分会场
			var confA = grids1.append("g")
							.attr("class", "confA");
			var confB = grids1.append("g")
							.attr("class", "confB");
			var confC = grids1.append("g")
							.attr("class", "confC");
			var confD = grids1.append("g")
							.attr("class", "confD");
			//签到处
			var signIn = grids1.append("g")
							.attr("class", "signIn");
			//海报区
			var poster = grids1.append("g")
							.attr("class", "poster");
			//一楼厕所
			var WC1 = grids1.append("g")
							.attr("class", "WC1");
			//服务台
			var service = grids1.append("g")
							.attr("class", "service");
			//一楼room
			var room1 = grids1.append("g")
							.attr("class", "room1");
			var room2 = grids1.append("g")
							.attr("class", "room2");
			var room3 = grids1.append("g")
							.attr("class", "room3");
			var room4 = grids1.append("g")
							.attr("class", "room4");
			//展厅
			var display = grids1.append("g")
							.attr("class", "display");
			//主会场
			var conf = grids1.append("g")
							.attr("class", "conf");
			//出入口
			var exArea = grids1.append("g")
							.attr("class", "exArea");
			//白色区域
			var whiteArea1 = grids1.append("g")
							.attr("class", "whiteArea1");
			//绘制一楼灰色区域##D4D4D4
			var wcgqy=[
			0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,20,21,22,23,24,25,26,27,28,29,
			0,1,2,3,4,5,6,7,8,9,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,12,13,14,29,
			0,1,2,3,4,5,12,13,14,29,
			0,1,2,3,4,5,12,13,14,29,
			0,29,
			29,
			0,29,
			0,1,3,6,8,9,10,11,12,13,14,16,18,29
			];
			var wcgqx=[
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			1,1,1,1,1,1,1,1,1,1,1,
			2,2,2,2,2,
			3,3,3,3,3,
			4,4,4,4,4,
			5,5,5,5,5,
			6,6,6,6,6,
			7,7,7,7,7,
			8,8,8,8,8,
			9,9,9,9,9,
			10,10,10,10,10,10,10,10,10,10,
			11,11,11,11,11,11,11,11,11,11,
			12,12,
			13,
			14,14,
			15,15,15,15,15,15,15,15,15,15,15,15,15,15
			];
			var currArea=[];
			for (var i = 0; i < wcgqx.length; i++) {
				currArea.push({x: (wcgqx[i]), y: (wcgqy[i])});
			}
			drawItem1(grayArea1, currArea, "#D2D2D2");
			//##000000 扶梯
			currArea=[];
			var futiy=[10,11,10,11];
			var futix=[1,1,14,14];
			for (var i = 0; i < futix.length; i++) {
				currArea.push({x: (futix[i]), y: (futiy[i])});
			}
			drawItem1(futiArea1, currArea, "rgb(249,182,69)");
			//##EEEED1 分会场A
			currArea=[];
			for (var i = 2; i < 4; i++) {
				for (var j = 1; j <6 ; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(confA, currArea, "rgb(158,183,214)");
			//##EEE8AA 分会场B
			currArea=[];
			for (var i = 4; i < 6; i++) {
				for (var j = 1; j <6 ; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(confB, currArea, "rgb(158,183,214)");
			//##EEE685 分会场C
			currArea=[];
			for (var i = 6; i < 8; i++) {
				for (var j = 1; j <6 ; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(confC, currArea, "rgb(158,183,214)")
			//##EEEE00 分会场D
			currArea=[];
			for (var i = 8; i < 10; i++) {
				for (var j = 1; j <6 ; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(confD, currArea, "rgb(158,183,214)");
			//##A52A2A 签到
			currArea=[];
			for (var i = 12; i < 14; i++) {
				for (var j = 2; j < 6; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(signIn, currArea, "rgb(158,183,214)")
			//海报#E0FFFF
			currArea=[];
			for (var i = 3; i < 11; i++) {
				for (var j = 7; j < 9; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(poster, currArea, "rgb(158,183,214)");
			//##CAFF10 展厅
			currArea=[];
			for (var i = 2; i < 12; i++) {
				for (var j = 15; j < 19; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(display, currArea, "rgb(158,183,214)");
			//##B4EEB4 主会场
			currArea=[];
			for (var i = 2; i < 12; i++) {
				for (var j = 19; j < 29; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(conf, currArea, "rgb(158,183,214)");
			//##43CD80 服务台
			currArea=[];
			for (var i = 14; i < 16; i++) {
				for (var j = 19; j < 21; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(service, currArea, "rgb(158,183,214)");
			//##A0522D 厕所
			currArea=[];
			for (var i = 4; i < 6; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 14; i < 16; i++) {
				for (var j = 27; j < 29; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(WC1, currArea, "rgb(158,183,214)");
			//##EEE0E5 room1
			currArea=[];
			for (var i = 6; i < 10; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(room1, currArea, "rgb(158,183,214)");
			//##EED5D2 room2
			currArea=[];
			for (var i = 10; i < 12; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(room2, currArea, "rgb(158,183,214)");
			//##EEE0E5 room3
			currArea=[];
			for (var i = 14; i < 16; i++) {
				for (var j = 21; j < 25; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(room3, currArea, "rgb(158,183,214)");
			//##EED5D2 room4
			currArea=[];
			for (var i = 14; i < 16; i++) {
				for (var j = 25; j < 27; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem1(room4, currArea, "rgb(158,183,214)");
			//##00FA9A 出入口
			currArea=[];
			var cry=[0 ,2 , 4, 5, 7,15,17,19];
			var crx=[13,15,15,15,15,15,15,0 ];
			for (var i = 0; i < crx.length; i++) {
				currArea.push({x: (crx[i]), y: (cry[i])});
			}
			drawItem1(exArea, currArea, "rgb(235,238,236)");
			//白色区域FFFFFF
			currArea=[];
			for (var i = 12; i < 29; i++) {
				currArea.push({x: 1, y: i});
			}
			for (var i = 2; i < 15; i++) {
				currArea.push({x: i, y: 6});
			}
			for (var i = 7; i < 9; i++) {
				currArea.push({x: 2, y: i});
			}
			for (var i = 2; i < 15; i++) {
				currArea.push({x: i, y: 9});
			}
			for (var i = 2; i < 4; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 12; i < 15; i++) {
				currArea.push({x: i, y: 1});
			}
			for (var i = 2; i < 6; i++) {
				currArea.push({x: 14, y: i});
			}
			for (var i = 11; i < 15; i++) {
				for (var j = 7; j < 9; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 12; i < 14; i++) {
				for (var j = 10; j < 29; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 12; i < 19; i++) {
				currArea.push({x: 14, y: i});
			}
			drawItem1(whiteArea1, currArea, "rgb(235,238,236)")
			currArea=[];
			//画二楼了
			//二楼所有元素
			grids2 = svg.append("g")
							.attr("class", "grids2");
			//灰色区域
			var grayArea2 = grids2.append("g")
							.attr("class", "grayArea2");
			//扶梯
			var futiArea2 = grids2.append("g")
							.attr("class", "futiArea2");
			//room区域
			var room2 = grids2.append("g")
							.attr("class", "room2");
			//食堂
			var canteen = grids2.append("g")
							.attr("class", "canteen");
			//休闲区
			var relaxation = grids2.append("g")
							.attr("class", "relaxation");
			//厕所
			var WC2 = grids2.append("g")
							.attr("class", "WC2");
			//白色区域
			var whiteArea2 = grids2.append("g")
							.attr("class", "whiteArea2");
			//二楼灰色区域绘制 ##D4D4D4
			var wcgqy2=[
			0,1,2,3,4,5,6,7,8,9,10,11,
			0,1,2,3,4,5,6,7,8,9,
			0,
			0,
			0,
			0,
			0,
			0,
			0,10,11,
			0,10,11,
			0,10,11,
			0,10,11,
			0,1,2,3,4,5,
			6,7,8,9,10,11
			];
			var wcgqx2=[
			0,0,0,0,0,0,0,0,0,0,0,0,
			1,1,1,1,1,1,1,1,1,1,
			2,
			3,
			4,
			5,
			6,
			7,
			8,8,8,
			9,9,9,
			10,10,10,
			11,11,11,
			12,12,12,12,12,12,
			15,15,15,15,15,15
			];
			for (var i = 0; i < wcgqx2.length; i++) {
				currArea.push({x: (wcgqx2[i]), y: (wcgqy2[i])});
			}
			for (var i = 0; i < 16; i++) {
				for (var j = 12; j < 30; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(grayArea2, currArea, "#D2D2D2");
			currArea=[];
			//##000000 扶梯
			var futiy=[10,11,10,11];
			var futix=[1,1,14,14];
			for (var i = 0; i < futix.length; i++) {
				currArea.push({x: (futix[i]), y: (futiy[i])});
			}
			drawItem2(futiArea2, currArea, "rgb(249,181,74)");
			currArea=[];
			//##EEE0E5 room2
			for (var i = 10; i < 12; i++) {
				for (var j = 1; j < 6; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 6; i < 8; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(room2, currArea, "rgb(158,183,214)");
			currArea=[];
			//##90EE90 餐厅
			for (var i = 2; i < 10; i++) {
				for (var j = 1; j < 6; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(canteen, currArea, "rgb(158,183,214)");
			currArea=[];
			//##D15FEE 休闲区
			for (var i = 13; i < 16; i++) {
				for (var j = 0; j < 6; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(relaxation, currArea, "rgb(158,183,214)");
			currArea=[];
			//##A0522D 厕所
			for (var i = 4; i < 6; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(WC2, currArea, "rgb(158,183,214)");
			//##白色区域FFFFFF
			currArea=[];
			for (var i = 2; i < 15; i++) {
				for (var j = 6; j < 10; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 2; i < 4; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			for (var i = 12; i < 14; i++) {
				for (var j = 10; j < 12; j++) {
					currArea.push({x: i, y: j});
				}
			}
			drawItem2(whiteArea2, currArea, "rgb(235,238,236)");
			currArea=[];
		}
			function drawItem1(item, data, color) {
				item.selectAll("rect")
					.data(data)
					.enter()
					.append("rect")
					.attr("x", function (d) {
						return xScale(d.y);
					})
					.attr("y", function (d) {
						return xScale(d.x);
					})
					.attr("width", gridSize)
					.attr("height", gridSize)
					.attr("fill", color)
					.attr("class", "ggrid");
				}
			function drawItem2(item, data, color) {
				item.selectAll("rect")
					.data(data)
					.enter()
					.append("rect")
					.attr("x", function (d) {
						return xScale(d.y);
					})
					.attr("y", function (d) {
						return xScale(d.x)+xScale(16);
					})
					.attr("width", gridSize)
					.attr("height", gridSize)
					.attr("fill", color)
					.attr("class", "ggrid");
				}
	</script>

	<div id="textContainer">
		<p><span>分会场A: </span><span id="confA"></span></p>
		<p><span>分会场B: </span><span id="confB"></span></p>
		<p><span>分会场C: </span><span id="confC"></span></p>
		<p><span>分会场D: </span><span id="confD"></span></p>
		<p><span style="margin-right: 10px;">主会场: </span><span id="conf"></span></p>
		<p><span>时间: </span><span id="time1"></span></p>
	</div>
	<script type="text/javascript">
		var dataset;
		var result=[];
		var xScale1, yScale1;
		var svg3,
			width1=600,
			height1=400;
		svg3=d3.select("body")
				.append("svg")
				.attr("width", width1)
				.attr("height", height1)
				.attr("class","svg3");
		var color=d3.scaleOrdinal(d3.schemeCategory10);
		d3.csv("conference_day1.csv", function (data) {
			dataset=data;
			for (var i = 0; i < dataset.length; i++) {
				var pic=[];
				for (var key in dataset[i]) {
					var temp={people: parseInt(dataset[i][key]), time: parseInt(key)};
					pic.push(temp);
				}
				pic.shift();
				pic.pop();
				result.push({place: i, data: pic});
			}

			xScale1=d3.scaleLinear()
					.domain([d3.min(result, function (d) {
						return d3.min(d.data, function (dd) {
							return dd.time;
						})
					}), d3.max(result, function (d) {
						return d3.max(d.data, function (dd) {
							return dd.time;
						})
					})])
					.range([padding, width1 - 2*padding]);
			yScale1=d3.scaleLinear()
					.domain([d3.min(result, function (d) {
						return d3.min(d.data, function (dd) {
							return dd.people;
						})
					}), d3.max(result, function (d) {
						return d3.max(d.data, function (dd) {
							return dd.people;
						})
					})])
					.range([height1 - padding, padding])
					.nice();
			var xAxis = d3.axisBottom()
						.scale(xScale1)
						.tickFormat(function (d) {
							return timeFormat(d);
						});
			var yAxis = d3.axisLeft()
						.scale(yScale1);
			svg3.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + 0 + ", " + (height1 - padding) + ")")
				.attr("id", "xAxisG")
				.call(xAxis);
			svg3.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + (padding) + ", 0)")
				.attr("id", "yAxisG")
				.call(yAxis);

			var legend = svg3.append("g")
							.attr("class", "legend")
							.attr("x", width1 - padding)
							.attr("y", padding)
							.attr("height", 100)
							.attr("width", 100);
			legend.selectAll("g")
					.data(result)
					.enter()
					.append("g")
					.each(function (d, i) {
						var g = d3.select(this);
						g.append("rect")
							.attr("x", width1 - 2*padding)
							.attr("y", function () {
								return padding + i * 25;
							})
							.attr("width", 14)
							.attr("height", 14)
							.style("fill", color(i));
						g.append("text")
							.attr("x", width1 - 2*padding + 25)
							.attr("y", function () {
								return padding + i * 25 + 12;
							})
							.text(function () {
								return i==0 ? "分会场A" : i==1 ? "分会场B" : i==2 ? "分会场C" : i==3 ? "分会场D" : "主会场";
							})
							.attr("font-family", "sans-serif")
			   				.attr("font-size", "14px");
					});
			legend.selectAll("g")
				.on("mouseover", function (d) {
					legend.selectAll("g")
						.style("opacity", 0.1);
					d3.select(this)
						.style("opacity", 1);
					d3.selectAll(".pp")
						.each(function (dd) {
							var g = d3.select(this);
							g.style("opacity", function () {
								return d.place==dd.place ? 1 : 0.1;
							});
						})
				})
				.on("mouseout", function (d) {
					legend.selectAll("g")
						.style("opacity", 1);
					d3.selectAll(".pp")
						.style("opacity", 1);
				});

			var line = d3.line()
						.x(function (d) {
							return xScale1(d.time);
						})
						.y(function (d) {
							return yScale1(d.people);
						});

			svg3.selectAll(".pp")
				.data(result)
				.enter()
				.append("g")
				.attr("class", "pp")
				.append("path")
				.datum(function (d) {
					return d.data;
				})
				.attr("class", "line")
				.attr("stroke",function (d, i) {
					return color(i);
				})
				.attr("fill", "none")
				.attr("stroke-width",3)
				.attr("opacity", 1)
				.attr("d", line);
			svg3.append("line")
				.attr("id", "YY")
				.attr("stroke-dasharray",'5,5');
			svg3.on("mousemove", function (d) {
					var x=event.offsetX;
					var y=event.offsetY;
					if (x>=padding && x<=width1-2*padding){
						var time=parseInt(xScale1.invert(x));
						svg3.select("#YY")
							.attr("x1", x)
							.attr("y1", height1-padding)
							.attr("x2", x)
							.attr("y2", padding)
							.attr("stroke", "gray")
							.attr("opacity", 1);

						d3.select("#confA")
							.text(getPeople(time, result[0]));
						d3.select("#confB")
							.text(getPeople(time, result[1]));
						d3.select("#confC")
							.text(getPeople(time, result[2]));
						d3.select("#confD")
							.text(getPeople(time, result[3]));
						d3.select("#conf")
							.text(getPeople(time, result[4]));
						d3.select("#time1")
							.text(timeFormat(time));

					}							

				});
		});
		function timeFormat(time) {
			var hour = parseInt(time/3600);
			var minute = parseInt((time%3600)/60);
			var second = (time%3600)%60;
			return hour+":"+minute+":"+second;
		}
		function getPeople(time, place) {
			var index=time-25240;
			return place.data[index].people;
		}
	</script>
</body>
</html>
